import React, {PureComponent} from "react";
import '../style.css'
import {ListView, NavBar, Icon} from "antd-mobile";
import {actions} from "../store";
import {connect} from "react-redux";

class DetailsComponent extends PureComponent {

    constructor(props) {
        super(props);
        let id = 0;
        let title = '';
        if (props.location.query === undefined) {
            props.history.goBack();
        } else {
            id = props.location.query.id;
            title = props.location.query.title;
        }
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            id: id,
            title: title,
            dataSource,
            articleListPage: {},
            articleList: [],
            pageNo: 1,
            isLoading: true,
            hasMore: false
        };
        console.log(this.state.id, this.state.title);
    }

    componentDidMount() {
        this.loadData();
    }

    loadData = () => {
        const {id, pageNo, articleList} = this.state;
        let body = {
            "articleId": id,
            "pageNo": pageNo,
            "pageSize": 10
        };
        this.props.getArticleDetail(body, (data) => {
            // if (this.state.dataSource)
            data.list.forEach((item, index) => {
                articleList.push(item);
            });
            this.setState({
                articleListPage: data,
                articleList: articleList,
                dataSource: this.state.dataSource.cloneWithRows(articleList),
                isLoading: false,
            });
        });
    };

    handleImageError = (e) => {
        //解决刷新问题
        e.target.style.display = 'block';
        e.target.src = "https://www.gifjia5.com/wp-content/themes/dux/img/thumbnail.png";
    };

    handleImageLoad = (e) => {
        //解决刷新问题
        e.target.style.display = 'block';
    };

    onLeftClick = () => {
        this.props.history.go(-1);
    };

    onEndReached = (event) => {
        const {isLoading, hasMore, pageNo} = this.state;
        if (isLoading && !hasMore) {
            return;
        }
        let page = pageNo + 1;
        this.setState({isLoading: true, pageNo: page}, () => {
            this.loadData();
        });
    };

    render() {
        const {articleList} = this.state;

        let index = articleList.length - 1;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = articleList.length - 1;
            }
            const obj = articleList[index--];
            return (
                <div key={rowID} style={{padding: '0 10px'}}>
                    {
                        (obj.articleImg.length > 0) ? <img alt=""
                                                           width={'100%'}
                                                           height={'100%'}
                                                           onLoad={(e) => this.handleImageLoad(e)}
                                                           onError={(e) => this.handleImageError(e)}
                                                           src={obj.articleImg}/> : null
                    }
                    {
                        (obj.articleText.length > 0) ?
                            <div style={{color: '#555', fontSize: '16px', lineHeight: 1.5}}>{obj.articleText}
                            </div> : null
                    }
                </div>
            );
        };
        return (
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left"/>}
                    onLeftClick={this.onLeftClick}
                >详情</NavBar>
                <ListView
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    renderHeader={() => <div className={'footer'}></div>}
                    renderFooter={() => (<div style={{padding: 10, textAlign: 'center'}}>
                        {this.state.isLoading ? '加载中...' : '没有啦...'}
                    </div>)}
                    renderRow={row}
                    className="am-list"
                    pageSize={5}
                    useBodyScroll
                    onScroll={() => {
                        // console.log('scroll');
                    }}
                    scrollRenderAheadDistance={500}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={10}
                />
            </div>
        );
    }
}

const mapState = (state) => ({
    // articleListPage: state.getIn(['home', 'articleListPage']),
});

const mapDispatch = (dispatch) => ({
    getArticleDetail(body, func) {
        dispatch(actions.getArticleDetail(body, func))
    },
});

export default connect(mapState, mapDispatch)(DetailsComponent);